<script>
import project from "../project/index.vue";
import ModuleCard from "../../../../../../components/business/module-card/index.vue";
import citySelect from "../../../../../../components/business/city-select/index.vue";
import UFormItem from "../../../../../../uni_modules/uview-ui/components/u-form-item/u-form-item.vue";
import {uploadFile} from "../../../../../../static/utils/uploadImg";
import imageUpload from "../../../../../../components/base/image-upload/index.vue";
import {getLngLatByAddressApi} from "../../../../../../api/common/location";

export default {
  name: "index",
  components: {imageUpload, UFormItem, citySelect, ModuleCard, project},
  props: {
    value: {
      type: Object,
      default: () => {
        return {}
      }
    },
    disabled: {
      type: Boolean,
      default: false,
    }
  },
  data(){
    return {
      idCardFront: [],
      idCardBack: [],
    }
  },
  computed: {
    formData: {
      get() {
        return this.$props.value
      },
      set(val) {
        this.$emit('input', val)
      }
    },
    editable() {
      return this.$props.disabled
    },
  },
  methods: {
    idCardFrontAfterRead(event) {
      // this.idCardFront = file
      const file = event.file;
      this['idCardFront'].push({
        ...file,
        status: 'uploading',
        message: '上传中'
      })
      uploadFile('/applet/uploadImageIden', file).then( res => {
        this.formData.idCardFront = JSON.parse(res.data).data.path;
        this.idCardFront.splice(0, 1, Object.assign(this.idCardFront[0], {
          status: 'success',
          message: '上传成功',
          url: JSON.parse(res.data).data.path
        }))
      })
    },
    // 删除身份证正面
    deleteIdCardFront() {
      this.idCardFront = []
    },
    // 删除图片
    deleteImg(key) {
      this[key] = []
    },
    // 公共图片上传
    async uploadImg(event, key) {
      const file = event.file;
      this[key].push({
        ...file,
        status: 'uploading',
        message: '上传中'
      })
      uploadFile('common/upload', file).then( res => {
        this.formData[key] = JSON.parse(res.data).fullPath;
        this[key].splice(0, 1, Object.assign(this[key][0], {
          status: 'success',
          message: '上传成功',
          url: JSON.parse(res.data).fullPath
        }))
      })
    },
    cityChange(arr) {
      // if (arr.value.length === 0) return;
      // this.formData.province = arr.value.length > 0 ? arr.value[0].name || '' : '';
      // this.formData.city = arr.value.length > 1 ? arr.value[1].name || '' : '';
      // this.formData.area = arr.value.length > 2 ? arr.value[2].name || '' : '';
      this.initLngLat();
    },
    // 根据省市区+详细地址 获取坐标
    async initLngLat() {
      const {province, city, area, address} = this.formData;
      // if (!province || !city || !area || !address) {
      //   uni.showToast({
      //     title: '请先选择省市区并填写详细地址',
      //     icon: 'none'
      //   })
      //   return;
      // }
      const { data } = await getLngLatByAddressApi([province, city, area, address].join(''));
      if(data){
        this.formData.longitude = data.split(',')[0];
        this.formData.latitude = data.split(',')[1];
      }
    },
    // 银行卡上传完成
    bankCardUploadComplete(url, data) {
      if (data) {
        this.formData.bankName = data.info.bankName;
        this.formData.bankCode = data.info.cardNumber;
      }
    },
  }
}
</script>

<template>

  <module-card title="业主信息">

    <u-form-item
        label="业主姓名"
        prop="formData.tenantName"
        borderBottom
        ref="item1"
        required
    >
      <u--input
          v-model="formData.tenantName"
          border="none"
          placeholder="请输入业主姓名"
      ></u--input>
    </u-form-item>
    <u-form-item
        label="联系电话"
        prop="formData.mobile"
        borderBottom
        ref="item1"
        required
    >
      <u--input
          v-model="formData.mobile"
          border="none"
          placeholder="请输入联系电话"
      ></u--input>
    </u-form-item>
    <u-form-item
        label="身份证号"
        prop="formData.idCode"
        borderBottom
        ref="item1"
        required
    >
      <u--input
          v-model="formData.idCode"
          border="none"
          placeholder="请输入身份证号"
      ></u--input>
    </u-form-item>
    <u-form-item
        label="安装地址"
        prop="formData.address"
        borderBottom
        ref="item1"
        required
    >
      <city-select
          :province.sync="formData.province"
          :city.sync="formData.city"
          :area.sync="formData.area"
          @confirm="cityChange"
      />
      <u-icon
          slot="right"
          name="arrow-right"
      ></u-icon>
    </u-form-item>
    <u-form-item
        label=" "
        prop="formData.address"
        borderBottom
        ref="item1"
    >
      <view>
        <u--input
            v-model="formData.address"
            border="none"
            placeholder="请输入安装地址"
            @blur="initLngLat"
        ></u--input>
      </view>
    </u-form-item>
    <u-form-item
        label="经纬度信息"
        prop="formData.longitude"
        borderBottom
        ref="item1"
    >
      <view v-if="formData.longitude && formData.latitude">{{formData.longitude}},{{formData.latitude}}</view>
      <view v-else>请先选择城市</view>
    </u-form-item>
    <u-form-item
        label="身份证照片"
        ref="item1"
        required
    >
      <view class="cell">
        <view class="cell-bd">
          <image-upload v-model="formData.idCardFront" >
            <image src="https://cdn.uviewui.com/uview/demo/upload/positive.png"
                   mode="widthFix" style="width: 125px;height: 75px;"></image>
          </image-upload>
        </view>
        <view class="cell-bd ml-15">
          <image-upload v-model="formData.idCardBack" >
            <image src="https://cdn.uviewui.com/uview/demo/upload/positive.png"
                   mode="widthFix" style="width: 125px;height: 75px;"></image>
          </image-upload>
        </view>
      </view>
    </u-form-item>
    <u-form-item
        label="开户银行"
        prop="formData.bankName"
        borderBottom
        ref="item1"
    >
      <view>
        <u--input
            v-model="formData.bankName"
            border="none"
            placeholder="请输入开户银行"
        ></u--input>
      </view>
    </u-form-item>
    <u-form-item
        label="开户行行号"
        prop="formData.bankNumber"
        borderBottom
        ref="item1"
    >
      <view>
        <u--input
            v-model="formData.bankNumber"
            border="none"
            placeholder="请输入开户行行号"
        ></u--input>
      </view>
    </u-form-item>
    <u-form-item
        label="开户支行"
        prop="formData.bankBranch"
        borderBottom
        ref="item1"
    >
      <view>
        <u--input
            v-model="formData.bankBranch"
            border="none"
            placeholder="请输入开户支行"
        ></u--input>
      </view>
    </u-form-item>
    <u-form-item
        label="银行账号"
        prop="formData.bankCode"
        borderBottom
        ref="item1"
    >
      <view>
        <u--input
            v-model="formData.bankCode"
            border="none"
            placeholder="请输入银行账号"
        ></u--input>
      </view>
    </u-form-item>
    <u-form-item
        label="银行卡照片"
        prop="formData.bankCard"
        borderBottom
        ref="item1"
    >
      <image-upload v-model="formData.bankCard" url="/applet/uploadImageYhk" @change="bankCardUploadComplete">
        <!--银行卡示意图-->
        <image src="https://cdn.uviewui.com/uview/demo/upload/positive.png"
               mode="widthFix" style="width: 125px;height: 75px;"></image>
      </image-upload>
    </u-form-item>
  </module-card>
</template>

<style scoped lang="scss">

</style>
